<template>
	<view>
		<navBar :title="title" @backSuccess="back"/>
		<view class="u-p-30" v-if="tab == 'login'">
			<!-- 跳转登录页次数{{times}} -->
			<view class="loginbox u-p-20">
				<view>手机号码</view>
				<view class="u-m-t-10">
					<u-input v-model="form.username" maxlength="11" type="text" placeholder="请输入手机号码" :border="false" />
				</view>
			</view>
			<view class="loginbox u-p-20 u-m-t-30">
				<view>密码</view>
				<view class="u-m-t-10">
					<u-input v-model="form.password" type="password" placeholder="请输入密码" :border="false" />
				</view>
			</view>

			<view class="u-m-t-30">
				<u-checkbox-group>
					<u-checkbox v-model="form.checked" shape="circle" active-color="#FF9832" size="30" label-size="26">
						<text>我已阅读并接受</text>
						<text class="fontColor" @click.stop="toUrl('user')">《用户使用协议》</text>
						<text class="fontColor" @click.stop="toUrl('privacy')">《隐私协议》</text>
					</u-checkbox>
				</u-checkbox-group>
			</view>

			<view class="u-m-t-60">
				<u-button type="warning" @click="login">一键登录</u-button>
			</view>
		</view>
		<register v-else></register>
		<view class="change-btn">
			<view class="" v-if="tab == 'login'" @click="tab = 'register';title='注册'">没有账户，立即注册<u-icon style="margin-left: 16rpx;"  name="arrow-right-double"></u-icon></view>
			<view class="" v-if="tab == 'register'" @click="tab = 'login';title='登录'">已有账户，马上去登录<u-icon style="margin-left: 16rpx;" name="arrow-right-double"></u-icon></view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navbar/index'
	import md5Libs from "uview-ui/libs/function/md5";
	import register from './register.vue'
	export default {
		data() {
			return {
				title: '登录',
				tab: 'login', // login 登录，register 注册
				form: {
					username: '',
					password: '',
					checked: false
				},
				isLogin: false,
				times: 0
			}
		},
		components: {
			navBar,
			register
		},
		onLoad() {
			getCurrentPages().forEach(item => {
				console.log('11', item.route)
				if (item.route == 'pages/login/index') {
					this.times ++
				}
			})
		},
		methods: {
			back() {
				uni.setStorageSync('toLoginTimes', 0)
			},
			toUrl(type) {
				uni.navigateTo({
					url: '/pages/login/agreement?type=' + type
				})
			},
			login() {
				if (!this.form.username.trim()) {
					this.$u.toast('手机号码不能为空');
					return
				}
				if (this.form.username.trim().length != 11) {
					this.$u.toast('手机号码输入有误');
					return
				}
				if (!this.form.password.trim()) {
					this.$u.toast('密码不能为空');
					return
				}
				if (!this.form.checked) {
					this.$u.toast('请先阅读并同意《用户使用协议》和《隐私协议》');
					return
				}
				this.$u.api.login({
					"username": this.form.username,
					"password": md5Libs.md5(this.form.password),
					"grant_type": "password",
					"client_id": "kuaibu_partner",
					"client_secret": "123456"
				}).then(res => {
					if (res.code == 0) {
						uni.setStorageSync('token', res.data.access_token);
						uni.setStorageSync('toLoginTimes', 0)
						uni.navigateBack();
					} else {
						this.$u.toast('登录失败，请重新登录');
					}
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.loginbox {
		border-radius: 10rpx;
		border-bottom: 1px solid $u-border-color;
	}

	.fontColor {
		color: $u-link-color;
	}
	.change-btn {
		text-align: center;
		font-size: 28rpx;
		color: #666666;
	}
</style>
